<template>
  <div class="user-manager">
    <div class="query-form">
      <el-form
        :model="menuForm"
        label-width="120px"
        ref="query_form"
        style="display: flex"
      >
        <div class="query" style="display: flex">
          <el-form-item label="菜单名称" prop="menuName">
            <el-input
              v-model="menuForm.menuName"
              placeholder="请输入菜单名称"
            />
          </el-form-item>
          <el-form-item label="菜单状态" prop="menuState">
            <el-select v-model="menuForm.menuState" placeholder="状态">
              <el-option label="正常" :value="1" />
              <el-option label="停用" :value="2" />
            </el-select>
          </el-form-item>
        </div>

        <div class="clickQuery" style="margin-left: 30px; width: 200px">
          <el-button type="primary" @click="onSubmit()">查询</el-button>
          <el-button @click="query_reset">重置</el-button>
        </div>
      </el-form>
    </div>

    <div class="base-table">
      <div class="action">
        <el-button type="primary" @click="menuAdd(1)">新增</el-button>
      </div>

      <el-table
        ref="multipleTableRef"
        :data="menuList"
        style="width: 100%"
        row-key="_id"
        :tree-props="{ children: 'children' }"
      >
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :formatter="item.formatter"
        ></el-table-column>

        <el-table-column label="操作" width="250">
          <template #default="scope">
            <el-button @click="menuEdit(scope.row)">编辑</el-button>
            <el-button type="primary" @click="menuAdd(2, scope.row)"
              >新增</el-button
            >
            <el-button type="danger" @click="menuDel(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog v-model="showMadol" title="创建菜单">
      <el-form ref="dialogForm" :model="menuForm" :rules="rules">
        <el-form-item label="父级菜单" prop="parentId">
          <el-cascader
            v-model="menuForm.parentId"
            :options="menuList"
            placeholder="请选择"
            :props="{ checkStrictly: true, value: '_id', label: 'menuName' }"
            clearable
          />
          <span> 不选，默认第一级别 </span>
        </el-form-item>
        <el-form-item label="菜单类型" prop="menuType">
          <el-radio-group v-model="menuForm.menuType">
            <el-radio :label="1">菜单</el-radio>
            <el-radio :label="2">按钮</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="菜单名称" prop="menuName">
          <el-input v-model="menuForm.menuName" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="菜单图标"
          prop="icon"
          v-show="menuForm.menuType === 1"
        >
          <el-input v-model="menuForm.icon" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="路由地址"
          prop="path"
          v-show="menuForm.menuType === 1"
        >
          <el-input v-model="menuForm.path" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="组件路径"
          prop="component"
          v-show="menuForm.menuType === 1"
        >
          <el-input v-model="menuForm.component" autocomplete="off" />
        </el-form-item>
        <el-form-item
          label="菜单状态"
          prop="menuState"
          v-show="menuForm.menuType === 1"
        >
          <el-radio-group v-model="menuForm.menuState">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">停用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          label="权限标识"
          prop="menuCode"
          v-show="menuForm.menuType === 2"
        >
          <el-input v-model="menuForm.menuCode" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSubmit">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import api from "../api/index";
import { ref, reactive, toRaw, nextTick } from "vue";
import utils from "../utils/utils";
// import { da } from "element-plus/es/locale";

// 定义查询
const onSubmit = async () => {
  console.log(menuForm);
  // console.log(pager);
  let list = await api.getMenuList(menuForm);
  console.log(list);
  menuList.value = list;
  // console.log(userList.value);
};
//定义表单的正则规则
const rules = reactive({
  rules: {
    menuName: [
      {
        required: true,
        message: "请输入菜单名称",
        trigger: "blur",
      },
      {
        min: 2,
        max: 10,
        message: "长度在2-8个字符",
        trigger: "blur",
      },
    ],
  },
});
// 定义获取表单节点dialogForm
const dialogForm = ref(null);
console.log(dialogForm.value);
// 定义记录用户行为
const action = ref("add");
// 定义弹窗变量
const showMadol = ref(false);
// 定义添加弹窗方法
const menuAdd = (type, row) => {
  action.value = "add";
  showMadol.value = !showMadol.value;
  if (type == 2) {
    // 说明点击的是快捷方式的新增按钮
    // 把id放到parentId数组中即可
    console.log(row);
    menuForm.parentId = [...row.parentId, row._id].filter((ele) => ele);
    nextTick(() => {
      Object.assign(menuForm, row);
    });
  }
};
// 定义编辑弹窗方法
const menuEdit = (row) => {
  action.value = "edit";
  showMadol.value = !showMadol.value;
  nextTick(() => {
    Object.assign(menuForm, row);
  });
};
// 定义删除方法
const menuDel = async (row) => {
  action.value = "delete";
  console.log(row._id);
  let data = { _id: row._id, action: action.value };
  await api.menuOperate(data);
  getMenuList();
};
// 定义菜单列表
let menuList = ref([]);
// 定义菜单列表请求参数，也可以作为初始化的表单
let menuForm = reactive({
  parentId: [null],
  menuType: 1,
  menuState: 1,
});
// 定义动态表格--格式
const columns = reactive([
  {
    label: "菜单名称",
    prop: "menuName",
    width: 150,
  },
  {
    label: "图标",
    prop: "icon",
  },
  {
    label: "菜单类型",
    prop: "menuType",
    formatter(row, column, value) {
      return {
        0: "管理员",
        1: "普通用户",
      }[value];
    },
  },
  {
    label: "权限标识",
    prop: "menuCode",
  },
  {
    label: "路由地址",
    prop: "path",
  },
  {
    label: "组件路径",
    prop: "component",
  },
  {
    label: "菜单状态",
    prop: "menuState",
    formatter(row, column, value) {
      return {
        1: "正常",
        2: "停用",
      }[value];
    },
  },
  {
    label: "创建时间",
    prop: "createTime",
    formatter: (row, column, value) => {
      return utils.formateDate(new Date(value));
    },
  },
]);

// 定义菜单请求
const getMenuList = async () => {
  let res = await api.getMenuList(menuForm);
  console.log(res);
  menuList.value = res;
};
getMenuList();
// 定义表单重置方法
const resetForm = () => {
  dialogForm.value.resetFields();
};
// 定义提交按钮方法
const handleSubmit = () => {
  dialogForm.value.validate(async (vaild) => {
    console.log("进去了");
    if (vaild) {
      console.log("有没有进去啊");
      // 发送提交请求
      let data = toRaw(menuForm);
      data.action = action.value;
      let res = await api.menuOperate(data);
      // 获取menuForm+action 发送请求(menuOperate)
      // 重置表单
      resetForm();
      // 关闭弹窗
      showMadol.value = !showMadol.value;
      // 重新请求menuList,渲染数据
      getMenuList();
    }
  });
};
</script>

<style lang="scss" scoped></style>
